<%--
  Created by IntelliJ IDEA.
  User: Y7000
  Date: 2024/4/9
  Time: 18:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<h1>详情页</h1>
<table>
    <tr>
        <td>id</td>
        <td><input type="text" value="${user.id}" disabled></td>
    </tr>
    <tr>
        <td>用户名</td>
        <td><input type="text" value="${user.username}" disabled></td>
    </tr>
    <tr>
        <td>昵称</td>
        <td><input type="text" value="${user.nickname}" disabled></td>
    </tr>
    <tr>
        <td>类型</td>
        <td><input type="text" value="${user.type}" disabled></td>
    </tr>
    <tr>
        <td>头像</td>
        <td>
            <form action="/user/upload" enctype="multipart/form-data" method="post">
                <input type="file" name="file">
                <input type="submit" value="上传">
            </form>
        </td>
    </tr>
    <tr>
        <td>Ajax头像</td>
        <td>
            <input type="file" name="file" id="fileId">
            <button id="btn">Ajax上传</button>
        </td>
    </tr>
    <tr>
        <td>展示</td>
        <td><img src="/upload/${user.image}" alt="" id="imgId" style="height: 200px;width: 200px"></td>
    </tr>
</table>
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>

<script>
    document.getElementById("btn").onclick=function (){
        // 获取文件
        var file=document.getElementById("fileId").files[0]
        console.log(file)
        //对数据进行封装
        var formData=new FormData();
        formData.append("file",file);
        //将该User对象的ID也一起封装，传递到/user/ajaxUpload
        formData.append("id",${user.id});
        $.ajax({
            url:"/user/ajaxUpload",
            type:"post",
            data:formData,
            //告诉jQuery，不要设置我的请求头
            contentType:false,
            //告诉jQuery，不要解析我的数据
            processData: false,
            success:function (res){
                console.log(res)
                $("#imgId").attr("src","/upload/"+res)
            }
        })
    }
</script>
</body>
</html>
